<template>
	<view class="flex-col page">
		<view class="flex-col flex-1 group">
			<view class="flex-col">
				<view class="flex-col justify-start items-center image-wrapper">
					<image class="image_2" src="http://jinghua.axu9.com/logo.png" />
				</view>
				<view class="flex-col group_2">
					<view class="flex-row equal-division">
						<view @click="toXuanchuan" class="flex-col items-center section equal-division-item">
							<image class="image_3" src="http://jinghua.axu9.com/xuanchuanpian.png" />
							<text class="font_2 mt-12-5">宣传片</text>
						</view>
						<view @click="toGuanwang" class="flex-col items-center section equal-division-item ml-10-5">
							<image class="image_3" src="http://jinghua.axu9.com/guanwang.png" />
							<text class="font_2 mt-12-5">官网</text>
						</view>
						<!-- <view @click="toVideo" class="flex-col items-center section equal-division-item ml-10-5">
							<image class="image_3" src="http://jinghua.axu9.com/shipin.png" />
							<text class="font_2 mt-12-5">产品视频</text>
						</view> -->
					</view>
					<text class="self-start font text_2">产品中心</text>
					<view class="flex-row justify-between group_3">
						<view @click="toCategory(index)" class="flex-col" v-for="(item,index) in productList">
							<view class="flex-col justify-start items-center">
								<image class="image_5" :src="item.img" />
							</view>
							<view class="flex-row group_4">
								<text class="font_3 text_4">{{item.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col section_5 mt-35">
				<view class="flex-col justify-start items-center text-wrapper">
					<text class="text_7">无机粉体应用的创新者</text>
				</view>
				<view class="flex-row equal-division_2" >
					<view class="flex-col items-center group_7 equal-division-item_2">
						<image @click="previewImage(0)" class="image_8" :src="config.store_shipin_img" />
						<text class="font_4 mt-6-5">视频号</text>
					</view>
					<view class="flex-col items-center group_7 equal-division-item_2">
						<image @click="previewImage(1)" class="image_8" :src="config.store_gongzhong_img" />
						<text class="font_4 mt-6-5">公众号</text>
					</view>
					<view class="flex-col items-center group_7 equal-division-item_2">
						<image @click="previewImage(2)" class="image_8" :src="config.store_kuaishou_img" />
						<text class="font_4 mt-6-5">快手</text>
					</view>
					<view class="flex-col items-center group_7 equal-division-item_2">
						<image @click="previewImage(3)" class="image_8" :src="config.store_douyin_img" />
						<text class="font_4 mt-6-5">抖音</text>
					</view>
				</view>
				<view class="divider"></view>
			</view>
		</view>

		<!-- 绑定手机号弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="16" z-index="999">
			<view class="flex-col items-center" style="width: 600rpx;height: 300rpx;">
				<view class="bind-title">
					绑定手机号
				</view>
				<view class="bind-input">
					<input type="number" placeholder="请输入手机号" v-model="mobile" class="input-class"/>
				</view>
				<view class="bind-btn" @click="bindSubmit">
					绑定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getHome,
		getCate
	} from '@/api/home.js'
	import {
		bindUser,userInfo
	} from '@/api/user.js'
	
	export default {
		data() {
			return {
				productList: [],
				config: {},
				mobile: '',//手机号
				show: false,//绑定手机号弹窗
				shenheStatus: 0,//审核状态 0未通过 未提交 1已通过
				adList: []
			}
		},
		onLoad() {
			// this.getData();
			// console.log(uni.getStorageSync("uid"), 'uid')
			// let uid = uni.getStorageSync("uid")
			// if(!uid) {
			// 	this.show = true
			// 	return
			// }
			// this.getUserInfo()
			
		},
		onShow() {
			this.getData();
			// console.log(uni.getStorageSync("uid"), 'uid')
			// let uid = uni.getStorageSync("uid")
			// if(!uid) {
			// 	this.show = true
			// 	return
			// }
			// this.getUserInfo()
		},
		methods: {
			previewImage(index) {
				
				uni.previewImage({
					urls: this.adList,
					current: index
				});
			},
			// 获取用户信息
			getUserInfo(){
				userInfo({
					uid: uni.getStorageSync("uid")
				}).then(res => {
					this.shenheStatus = res.data.status
					
				}).catch(err => {
					console.log(2222, err)
				})
			},
			// 跳转到官网
			toGuanwang() {
				// window.location.href = this.config.store_guanwang
				window.open(this.config.store_guanwang, '_blank');
			},
			// 点击产品视频
			toVideo() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
			},
			// 点击宣传片
			toXuanchuan() {
				uni.navigateTo({
					url: '/pages/detail/index?type=1' + '&video=' + this.config.store_xuanchuan_video
				})
			},
			getData() {
				getHome({}).then(res => {
					this.productList = res.data.cate;
					this.config = res.data.config;
					this.adList.push(this.config.store_shipin_img)
					this.adList.push(this.config.store_gongzhong_img)
					this.adList.push(this.config.store_kuaishou_img)
					this.adList.push(this.config.store_douyin_img)
					uni.setNavigationBarTitle({
						title: res.data.config.store_title
					})
				}).catch(err => {
					console.log(2222, err)
				})
			},
			bindSubmit(){
				console.log('bindSubmit')
				if(this.mobile == ''){
					console.log('lslsl')
					// this.show = false
					uni.showToast({
						title: '电话号不能为空',
						icon: 'none'
					})
					return
				}
				bindUser({
					mobile: this.mobile
				}).then(res => {
					this.show = false
					uni.showToast({
						title: '绑定成功'
					})
					uni.setStorageSync('uid',res.data.id)
					this.getUserInfo()
					
				}).catch(err => {
					console.log(2222, err)
				})
				
				
			},
			toCategory(index) {
				let uid = uni.getStorageSync("uid")
				// if(!uid){
				// 	this.show = true
				// 	return
				// }
				if(uid == 1){
					uni.navigateTo({
						url: '/pages/category/index?index=' + index
					})
				}else {
					uni.navigateTo({
						url: '/pages/productCenter/index'
					})
				}
				
			}
		}
	}
</script>

<style>
	@import url('../../common/css/common.css');

	.mt-12-5 {
		margin-top: 0.78rem;
	}

	.ml-10-5 {
		margin-left: 0.66rem;
	}

	.ml-11 {
		margin-left: 0.69rem;
	}

	.ml-9-5 {
		margin-left: 0.59rem;
	}

	.mt-35 {
		margin-top: 2.19rem;
	}

	.mt-6-5 {
		margin-top: 0.41rem;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.font {
		font-size: 1.13rem;
		font-family: PingFang SC;
		line-height: 1.06rem;
	}

	.group {
		overflow-y: auto;
	}

	.image-wrapper {
		padding: 0.75rem 0;
		/* background-image: url('https://ide.code.fun/api/image?token=661f5f5ba17dbc0011549849&name=2c89247e752b7e6fd0c4ffa48d090f7e.png'); */
		background-color: #004d9d;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_2 {
		width: 6.59rem;
		height: 2.22rem;
	}

	.group_2 {
		padding: 0.94rem 0.88rem 0;
	}

	.equal-division {
		align-self: stretch;
		margin-right: 0.13rem;
	}

	.section {
		flex: 1 1 6.75rem;
	}

	.equal-division-item {
		padding: 1.5rem 0 1.25rem;
		background-color: #fbfbfb;
		border-radius: 0.25rem;
		height: 6.75rem;
	}

	.image_3 {
		width: 2.5rem;
		height: 2.5rem;
	}

	.font_2 {
		font-size: 0.75rem;
		font-family: PingFang SC;
		line-height: 0.72rem;
		color: #151515;
	}

	.text_2 {
		margin-left: 0.13rem;
		margin-top: 1.28rem;
		color: #151515;
	}

	.group_3 {
		flex-wrap: wrap;
		margin-top: 43rpx;
	}

	.section_2 {
		padding: 1.63rem 0 2.13rem;
		flex: 1 1 10.5rem;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		height: 8.41rem;
	}

	.image-wrapper_3 {
		filter: drop-shadow(0rem 0.19rem 0.91rem #4b4b4b1a);
		/* background-image: url('https://ide.code.fun/api/image?token=661f5f5ba17dbc0011549849&name=1ba84173e0b80229e0a8c80a3b3f78dc.png'); */
		background-size: 100% 100%;
		background-repeat: no-repeat;
		/* width: 8.91rem; */
	}

	.image_5 {
		/* mix-blend-mode: screen; */
		/* width: 8.91rem;
		height: 4.66rem; */
		width: 335rpx;
		height: 268rpx;
		border-radius: 16rpx;
	}

	.section_3 {
		padding: 0.94rem 0;
		flex: 1 1 10.5rem;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		height: 8.41rem;
	}

	.image-wrapper_2 {
		filter: drop-shadow(0rem 0.19rem 0.91rem #b3b3b357);
		background-image: url('https://ide.code.fun/api/image?token=661f5f5ba17dbc0011549849&name=73321b49c0cde6e4e6a18889be044b81.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 6.53rem;
	}

	.image_4 {
		mix-blend-mode: screen;
		width: 6.53rem;
		height: 6.53rem;
	}

	.group_4 {
		margin: 0 auto;
		margin-top: 1rem;
		margin-bottom: 1rem;
		/* padding: 0 3.97rem; */
	}

	.font_3 {
		font-size: 0.88rem;
		font-family: PingFang SC;
		line-height: 0.78rem;
		font-weight: 500;
		color: #151515;
	}

	.text_4 {
		line-height: 0.81rem;
	}

	.text_3 {
		margin-right: 0.31rem;
		line-height: 0.81rem;
	}

	.group_5 {
		margin-top: 1rem;
	}

	.section_4 {
		padding: 1.66rem 0 1.5rem;
		flex: 1 1 10.5rem;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		height: 8.41rem;
	}

	.image-wrapper_5 {
		filter: drop-shadow(0rem 0.19rem 0.91rem #b3b3b357);
		background-image: url('https://ide.code.fun/api/image?token=661f5f5ba17dbc0011549849&name=aa1a02a5233034617864ecc2d33ae35e.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 6.94rem;
	}

	.image_7 {
		mix-blend-mode: screen;
		width: 6.94rem;
		height: 5.25rem;
	}

	.image-wrapper_4 {
		margin-right: 0.094rem;
		padding: 0.91rem 0 1.5rem;
		flex: 1 1 10.5rem;
		background-color: #f8f8f8;
		border-radius: 0.5rem;
		height: 8.38rem;
	}

	.image_6 {
		filter: drop-shadow(0rem 0.19rem 0.91rem #b3b3b357);
		width: 6.22rem;
		height: 6rem;
	}

	.group_6 {
		margin-top: 1.06rem;
		padding: 0 4.03rem;
	}

	.text_5 {
		line-height: 0.81rem;
	}

	.text_6 {
		margin-right: 0.34rem;
		line-height: 0.84rem;
	}

	.section_5 {
		padding: 1.91rem 1rem 1.75rem;
		background-color: #212121f5;
	}

	.text-wrapper {
		padding: 0.88rem 0;
		background-color: #004d9d;
		border-radius: 1.28rem;
	}

	.text_7 {
		color: #ffffff;
		font-size: 1.19rem;
		font-family: YouSheBiaoTiHei;
		line-height: 0.88rem;
		letter-spacing: 0.24rem;
	}

	.equal-division_2 {
		margin: 0.81rem 0.66rem 0 0.53rem;
	}

	.group_7 {
		flex: 1 1 5.06rem;
	}

	.equal-division-item_2 {
		padding: 0.19rem 0 0.31rem;
	}

	.image_8 {
		width: 4.5rem;
		height: 4.5rem;
	}

	.font_4 {
		font-size: 0.81rem;
		font-family: PingFang SC;
		line-height: 0.78rem;
		color: #ffffff;
	}

	.divider {
		margin-right: 0.19rem;
		margin-top: 1.41rem;
		background-color: #ffffff2b;
		height: 0.031rem;
	}
	
	/* 绑定手机号弹窗 */
	.bind-title {
		height: 100rpx;
		line-height: 100rpx;
	}
	.bind-input{
		margin-bottom: 40rpx;
	}
	.bind-btn{
		width: 200rpx;
		height: 60rpx;
		border-radius: 16rpx;
		color: #fff;
		font-weight: 600;
		line-height: 60rpx;
		text-align: center;
		background-color: #004d9d;
	}
	.input-class{
		text-align: center;
	}
</style>